<template />
<script setup>
import { ref, onMounted } from 'vue'
import Highcharts from 'highcharts/highstock'
import HighchartsMore from 'highcharts/highcharts-more'
import HighchartsDrilldown from 'highcharts/modules/drilldown'
import Highcharts3D from 'highcharts/highcharts-3d'

HighchartsMore(Highcharts)
HighchartsDrilldown(Highcharts)
Highcharts3D(Highcharts)

onMounted(() => {
  // createPillar()
})

/**
 * 创建柱状图
 * @param {*} id 容器id
 * @param {*} categories x轴数据
 * @param {*} values 值数组
*/
const createPillar = (id, title, categories, values) => {
  Highcharts.chart(id, {
    legend: {
      enabled: false // 不显示底部文字
    },
    chart: {
      backgroundColor: '#e8eaeb',
      type: 'column'
    },
    title: {
      text: title
    },
    subtitle: {
      text: ''
    },
    xAxis: {
      categories, // ['2023年1月','2023年6月','2023年12月'],
      crosshair: true
    },
    yAxis: {
      min: 0,
      title: {
        text: ''
      }
    },
    tooltip: {
      // head + 每个 point + footer 拼接成完整的 table
      headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
      pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} 亩</b></td></tr>',
      footerFormat: '</table>',
      shared: true,
      useHTML: true
    },
    plotOptions: {
      column: {
        borderWidth: 0
      },
      series: {
        borderWidth: 0,
        dataLabels: {
          enabled: true,
          format: '{point.y}'
        }
      }
    },
    series: [{
      name: '土地面积',
      data: values // [49, 71, 106]
    }],
    credits: {
      enabled: false // 不显示LOGO
    }
  })
}

/**
 * 创建环形图
 * @param {*} id 容器id
 * @param {*} categories x轴数据
 * @param {*} values 值数组
*/
const createAnnular = (id, title, value) => {
  var chart = Highcharts.chart(id, {
    chart: {
      backgroundColor: '#e8eaeb',
      spacing: [40, 0, 40, 0]
    },
    title: {
      floating: true,
      text: title
    },
    series: [{
      type: 'pie',
      innerSize: '80%',
      name: '地块面积',
      data: [
        ['', value],
        // ['',    8.5]
      ]
    }],
    credits: {
      enabled: false // 不显示LOGO
    }
  }, function(c) { // 图表初始化完毕后的会掉函数
    // 环形图圆心
    var centerY = c.series[0].center[1]
    var titleHeight = parseInt(c.title.styles.fontSize)
    // 动态设置标题位置
    c.setTitle({
      y: centerY + titleHeight / 2
    })
  })
}

/**
 * 创建饼图
 * @param {*} id 容器id
 * @param {*} mcl 目标亩产
 * @param {*} plannedSpending 	支出
 * @param {*} actualSpending 	预算
*/

const createPie = (id, mcl, plannedSpending, actualSpending) => {
  Highcharts.chart(id, {
    chart: {
      backgroundColor: '#e8eaeb',
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    title: {
      text: `目标：亩产${mcl}`
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true,
          format: '<b>{point.name}</b>: {point.y}',
          style: {
            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black',
            fontSize: '14px'
          }
        }
      }
    },
    series: [{
      name: '比例',
      colorByPoint: true,
      data: [
        {
          name: '支出',
          y: actualSpending
        }, {
          name: '预算',
          y: plannedSpending
        },
      ]
    }],
    credits: {
      enabled: false // 不显示LOGO
    }
  })
}

defineExpose({
  createPillar,
  createAnnular,
  createPie
})

</script>
